/**
 * 主页面
 */
import React, {useEffect, useState} from 'react';
import {FlatList, View, StyleSheet, Text, Image, NativeModules, TouchableWithoutFeedback} from 'react-native';
import ClassItem from './components/class-item';
import {width, scaleSizeH, setSpText, scaleSizeW} from '@/util/screen';
import {req_findClassesCategorie} from '@/util/apis';
import sysStore from '@/store/sys';
import storage from '@/util/localStorage';
import LoadingUtil from '@/util/loading';
import NetInfo from '@react-native-community/netinfo';

const LiveModule = NativeModules.LiveMgr;
export default ({navigation}) => {
    const [classes, setClasses] = useState([]);

    /**
     * 加载课程
     * @returns {Promise<void>}
     */
    const request_courses = async () => {
        LoadingUtil.startShowLoading();
        const result = await req_findClassesCategorie({});
        setClasses(result);
        console.log('result##', JSON.stringify(result));
        LoadingUtil.dismissLoading();
    };

    /**
     * 版本检测
     */
    const checkVersion = () => {
        sysStore.checkVersion();
    };

    /***
     * 检测 登录状态
     * @returns {Promise<void>}
     */
    const checkLogin = async () => {
        const result = await storage.getData('TOKEN_INFO');
        if (!result) {
            navigation.navigate('Login');
            LoadingUtil.dismissLoading();
        }
    };

    useEffect(() => {
        //监听网络变化事件
        const unsubscribe = NetInfo.addEventListener(state => {
            console.log('Connection type', state.type);
            if (state.isConnected) {
                // 网络已连接
                checkLogin();
                // 版本检测
                checkVersion();
                request_courses();
            } else {
                navigation.navigate('WifiConfig');
            }
        });
        return () => {
            unsubscribe();
        };
    }, []);
    return (
        <View style={styles.container}>
            <View style={styles.topBar}>
                <TouchableWithoutFeedback
                    onPress={() => {
                        LiveModule.startLiveActivity();
                    }}
                >
                    <Image style={styles.living} source={require('@/images/live/living.png')}/>
                </TouchableWithoutFeedback>

            </View>
            <FlatList
                ItemSeparatorComponent={() => <View style={styles.separator}/>}
                data={classes}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({item}) => (
                    <ClassItem navigation={navigation} index={0} item={item}/>
                )}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    topBar: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    live_text: {
        color: '#cc2636',
        fontWeight: 'bold',
        fontSize: 20,
        paddingHorizontal: scaleSizeW(64),
        paddingVertical: scaleSizeH(30),
    },
    living: {
        width: scaleSizeW(60),
        height: scaleSizeH(60),
        marginRight: scaleSizeW(20),
        marginTop: scaleSizeH(20),
    },
    separator: {
        width: width,
        height: scaleSizeH(26),
        backgroundColor: '#f5f5f5',
    },
});
